<template>
  <div class="container">
    <div class="content-nav">
      <div class="nav-top">
        <router-link :to="{ name: 'Home' }">首页</router-link>
        <img src="../assets/箭头.png" alt="" />
        <router-link @click.native="toAll()" to="">全部商品</router-link>
        <img src="../assets/箭头.png" alt="" />
        <router-link to="">分类</router-link>
      </div>
      <div class="nav-bottom">
        <span>分类</span>
        <ul>
          <li
            @click="NavTrans(0, callback)"
            :class="currentNav == 0 ? 'active' : ''"
          >
            全部
          </li>
          <li
            :key="item.categoryId"
            v-for="(item, index) in this.class"
            :class="currentNav == index + 1 ? 'active' : ''"
            @click="NavTrans(index + 1, callback)"
          >
            {{ item.categoryName }}
          </li>
        </ul>
      </div>
    </div>
    <div class="content">
      <div class="content-top">
        <SingleCard
          v-for="item in items"
          :res="item"
          :key="item.productId"
          @click.native="getInfo(item)"
        />
      </div>
      <div class="divide-page-btn">
        <el-pagination
          :background="true"
          small
          layout="prev, pager, next"
          :total="30"
          :current-page.sync="currentPage"
          @current-change="(val) => changeNum(val, callback)"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import { getHomeClassification, getShoppingList } from "../api/home";
import SingleCard from "./SingleCard.vue";
export default {
  name: "DisplayAll",
  data() {
    return {
      class: null,
      currentNav: 0,
      currentPage: 1,
      params: {
        pageNum: 1,
        pageSize: 15,
        categoryId: 0,
      },
      items: null,
    };
  },
  created() {
    this.init();
  },
  mounted() {},
  methods: {
    init() {
      getHomeClassification()
        .then((res) => (this.class = res.data))
        .catch((err) => {
          console.log(err);
        });

      getShoppingList({
        pageNum: 1,
        pageSize: 15,
      }).then((res) => {
        this.items = res.rows;
      });
    },
    async NavTrans(index, callback) {
      this.currentNav = index;
      this.params.categoryId = index;
      this.params.pageNum = 1;
      this.currentPage = 1;
      this.items = await callback(this.params);
    },
    callback: (params) => {
      if (params.categoryId == 0) {
        delete params.categoryId;
      }
      return getShoppingList(params).then((res) => {
        return res.rows;
      });
    },
    async changeNum(currentpage, callback) {
      this.params.pageNum = currentpage;
      this.items = await callback(this.params);
    },

    getInfo(item) {
      this.$router.push({
        path: `/all-store/details/${item.productId}`,
      });
    },
    async toAll(){
      await this.NavTrans(0, this.callback);
    }
  },
  updated() {
  },
  components: { SingleCard },
};
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
}
.content-nav {
  box-sizing: border-box;
  width: 1200px;
  height: 85px;
  margin: 24px auto 0;
  .nav-top {
    a {
      color: #606266;
      font-size: 16px;
    }

    > img {
      width: 9.04px;
      height: 15.96px;
      margin: 0 9.48px;
    }
  }

  .nav-bottom {
    display: flex;
    margin: 24px 0 0;
    span {
      box-sizing: border-box;
      font-size: 16px;
      height: 43px;
      padding: 13px 18px 13px 0;
      border-bottom: 1px solid #dcdfe6;
    }
    ul {
      width: 706px;
      height: 42px;
      display: flex;

      li {
        box-sizing: border-box;
        font-size: 14px;
        padding: 13px 19px;
        height: 42px;
        border: 1px solid #dcdfe6;
        border-left: none;
        line-height: 14px;
        &:hover {
          cursor: pointer;
          color: #409eff;
          border-bottom: none;
        }
      }
      li:nth-child(1) {
        border-top-left-radius: 5px;
        border-left: 1px solid #dcdfe6;
      }
      li:nth-last-child(1) {
        border-top-right-radius: 5px;
      }
      .active {
        border-bottom: none;
        color: #409eff;
      }
    }
  }
}
.content {
  padding-top: 14px;
  width: 1200px;
  height: 1000px;
  background-image: url(../assets/Blank.png);
  margin: 0 auto;
  .content-top {
    height: 934px;
    width: 100%;
    display: grid;
    grid: repeat(3, 300px) / repeat(5, 232px);
    gap: 14px 10px;
  }

  .divide-page-btn {
    width: 168px;
    margin: 10px auto;
  }
}
</style>
